<template>
  <div class="Comment">
    <van-action-sheet
      v-model="actionShow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />
    <van-nav-bar
      :title="'评论(' + commentList.length + ')'"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="Comment-List">
      <transition-group>
        <div
          @click="onCardClick"
          class="Comment-List-commentCard"
          v-for="item in commentList"
          :key="item"
        >
          <div class="Comment-List-commentCard-up">
            <img
              class="Comment-List-commentCard-up-avatar"
              :src="item.avatar"
              alt=""
            />
            <div class="Comment-List-commentCard-up-info">
              <div class="Comment-List-commentCard-up-info-username">
                {{ item.username }}
              </div>
              <div class="Comment-List-commentCard-up-info-date">
                {{ item.date }}
              </div>
            </div>
          </div>
          <div class="Comment-List-commentCard-down">
            {{ item.content }}
          </div>
        </div>
      </transition-group>
    </div>
    <div class="Comment-sendBar">
      <textarea
        placeholder="写下你的评论吧！"
        class="Comment-sendBar-input"
        ref="textarea"
        :style="{ height: height }"
        v-model="comment"
      ></textarea>
      <van-button
        class="Comment-sendBar-send_btn"
        @click="onSendClick"
        :disabled="!comment"
        round
        size="small"
        type="info"
        >发送</van-button
      >
    </div>
  </div>
</template>

<script>
import calcTextareaHeight from "@/assets/js/calcTextareaHeight";
import { Toast } from "vant";
import {
  queryDeviceCommentInfo,
  deleteDeviceComment,
  addDeviceComment,
} from "@/api/api";
import { formatDate, unFormatDate } from "@utils/dateCon.js";
export default {
  name: "interface_page_comment",
  data: function () {
    return {
      comment: "",
      height: "26px",
      actionShow: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ name: "回复评论" }, { name: "删除评论" }],
      commentList: [],
    };
  },
  mounted: function () {
    this.Init();
  },
  methods: {
    Init() {
      this.paramsRes = this.$route.params;
      this.deviceInfo = this.paramsRes.deviceInfo;

      this.UpdateList();
    },
    UpdateList() {
      var nDate = new Date();
      var nowDate = {
        year: nDate.getFullYear(),
        month: nDate.getMonth(),
        day: nDate.getDate(),
        hours: nDate.getHours(),
        minutes: nDate.getMinutes(),
        seconds: nDate.getSeconds(),
      };

      var params = {
        deviceID: this.deviceInfo.id,
      };
      queryDeviceCommentInfo(params).then((result) => {
        this.commentList = [];
        var timeradom = Math.random();
        for (let i = 0; i < result.length; i++) {
          var res = {
            id: result[i].id,
            avatar:
              "http://121.5.58.100/avatar/" +
              result[i].comment_userid +
              "_avatar.jpg?tempid=" +
              timeradom,
            username: result[i].username,
            date: this.conDate(nowDate, result[i].comment_date),
            content: result[i].comment,
          };
          this.commentList.unshift(res);
        }

        console.log(result);
      });
    },
    onClickLeft() {
      this.$router.back();
    },
    getHeight() {
      this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;
    },
    onCardClick() {
      this.actionShow = true;
    },
    onSendClick() {
      this.commentList.shift();
      var params = {
        device_id: this.deviceInfo.id,
        comment: this.comment,
        comment_userid: localStorage.getItem("setUserID"),
      };
      addDeviceComment(params).then((result) => {
        console.log(result);
        if (result.returncode === 200) {
          Toast({
            message: "评论成功",
            position: "bottom",
          });

          // this.commentList.unshift({
          //   avatar: "http://121.5.58.100/avatar/27_avatar.jpg",
          //   username: "LWH",
          //   date: "2021年11月04日",
          //   content: this.comment,
          // });
        } else {
          Toast({
            message: "评论失败",
            position: "bottom",
          });
        }
        this.UpdateList();
      });
      this.comment = "";
    },
    conDate(nowDate, res) {
      var resDate = {
        year: unFormatDate(res, "yyyy"),
        month: unFormatDate(res, "MM"),
        day: unFormatDate(res, "dd"),
        hours: unFormatDate(res, "HH"),
        minutes: unFormatDate(res, "mm"),
        seconds: unFormatDate(res, "ss"),
      };
      if (Number(nowDate.year) === Number(resDate.year)) {
        if(Number(nowDate.day) === Number(resDate.day)){
          var times = (new Date().getTime()-Date.parse(new Date(res)))/1000;
          console.log(times)
          if(times<3600){
            if(times<60){
              return "刚刚"
            }
            else {
              return (times/60).toFixed(0)+"分钟前"
            }
            
          }
          // else if(Number(nowDate.minutes) === Number(resDate.minutes)){
          //   return '刚刚';
          // }
          else{
            return unFormatDate(res, "HH:mm");
          }
          
        }
        else{
          return unFormatDate(res, "MM-dd");
        }
        
      } else {
        return unFormatDate(res, "yyyy-MM-dd");
      }
    },
  },
  watch: {
    comment() {
      this.getHeight();
    },
  },
};
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(-100px);
}

.v-enter-active,
.v-leave-to {
  transition: all 0.6s ease;
}

/* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
.v-move {
  transition: all 0.6s ease;
}

.v-leave-to {
  position: absolute;
}
.Comment {
  height: 100%;
  width: 100%;
  position: absolute;
  &-List {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    // filter: 10px;
    height: calc(100% - 96px);
    overflow-y: auto;
    overflow-x: hidden;
    &-commentCard {
      width: 100%;
      height: auto;
      border-bottom: solid gainsboro 1px;

      &-up {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0 0.2rem;
        &-avatar {
          margin: 0.8rem;
          width: 2.2rem;
          height: 2.2rem;
          border-radius: 2.2rem;
        }
        &-info {
          &-username {
            font-size: 1rem;
            font-weight: 600;
            color: #606266;
          }
          &-date {
            font-size: 0.7rem;
            color: #606266;
          }
        }
      }
      &-down {
        margin-bottom: 1rem;
        margin-left: 4rem;
        width: 80%;
        height: auto;
        font-size: 16px;
        line-height: 22px;
        font-family: Arial, Helvetica, sans-serif;
        word-break: break-all;
      }
    }
  }
  &-sendBar {
    //   border-top: solid 2px rgb(255, 255, 255);
    box-shadow: 0px 0px 12px 0 rgb(0 0 0 / 8%);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    &-input {
      border-radius: 10px;
      outline: none;
      border: none;
      margin: 10px 0 10px 20px;
      display: inline-block;
      width: 100%;
      /*height: 30px;*/
      line-height: 26px;
      font-size: 16px;
      resize: none;
    }
    &-send_btn {
      margin: 10px 20px;
    }
  }
}
</style>